<template>
  <div class="index">
    <!-- 为边框写的元素 -->
    <div class="footer"></div>
    <p>前端就业行情</p>
    <echart :option="option"></echart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图表数据
      option: {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["金融", "游戏", "电商", "旅游", "房地产", "汽车", "医疗"],
            axisTick: {
              alignWithLabel: true
            },
            // X轴文字颜色
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(255, 255, 255, 0.7)"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            // Y轴度量线
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(25, 186, 139, 0.17)"
              }
            },
            axisLine: {
              //Y轴轴线的颜色以及宽度
              show: true,
              lineStyle: {
                color: "rgba(25, 186, 139, 0.17)",
                width: 1,
                type: "solid"
              }
            },

            // y轴文字的配置
            axisLabel: {
              textStyle: {
                color: "rgba(255, 255, 255, 0.7)" //Y轴内容文字颜色
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            barWidth: "60%",
            data: [1290, 520, 2100, 3304, 3920, 3300, 2200],
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [5, 5, 0, 0]
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  // 使用伪元素做边框
  .footer {
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-left: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &::after {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-right: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 0;
  }
  // #leftTopEchart {
  //   width: 100%;
  //   height: 100%;
  // }
}
</style>